<template>
    <div class="app-nav-container">
        <a-tabs v-model="tabKey"  :tabBarGutter="0">
            <template  v-for="(nav,index) of tabNavs">
                <a-tab-pane :key="nav.key">
                    <template slot="tab" >
                         <a-dropdown :trigger="['contextmenu']">
                            <span class="tab-text" @click="handleClick(nav)">
                                 {{nav.title}}
                                <span class="tab-close" @click="delCurrent(nav,index)">x</span>
                            </span>
                            <a-menu slot="overlay">
                                <template v-for="item of tabMenuArr">
                                    <a-menu-item :key="item.key" @click="handlerDel(item,nav,index)">
                                        {{item.title}}
                                    </a-menu-item>
                                </template>
                            </a-menu>
                        </a-dropdown>
                    </template>
                </a-tab-pane>
            </template>
        </a-tabs>
    </div>

</template>

<script>
/*
* 应用设计导航条
* */
import { cloneDeep } from 'lodash-es'
export default {
    name: "app-nav-toolbar",
    props:{
        value:{},
        navs:{},
        tabClick:{}
    },
    computed:{
        tabKey:{
            get(){
                return this.value
            },
            set(value){
                this.$emit('input',value)
            }
        }
    },
    data(){
        return {
            tabMenuArr:[
                {title:this.i18n('currentTAB','关闭当前页签'),key:'delCurrent'},
                {title:this.i18n('rightTAB','关闭右边页签'),key:'delRight'},
                {title:this.i18n('leftTAB','关闭左边页签'),key:'delLeft'},
                {title:this.i18n('otherTAB','关闭其它页签'),key:'delOther'},
                {title:this.i18n('allTAB','关闭全部页签'),key:'delAll'},
            ],
            tabNavs:[]
        }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "appNav", key);
        },
        handleClick(nav){
            this.tabNavs = cloneDeep(this.navs)
            this.tabClick && this.tabClick(nav);
        },
        handlerDel(item,nav,index){
            this[item.key] && this[item.key](nav,index);
        },
        delCurrent(nav,index){//删除当前
            if(this.tabNavs.length > 1){
                let _select = this.tabNavs[index - 1] || this.tabNavs[index + 1] ;
                this.tabNavs.splice(index,1);
                this.$emit('tabDelChange',_select.key,this.tabNavs);
            }else {
                this.tabNavs.splice(index,1);
                this.$emit('tabDelChange','',[])
            }
        },
        delRight(nav,index){//删除右边
            if(index === this.tabNavs.length - 1){
                return ;
            }
            this.tabNavs = this.tabNavs.slice(0,index + 1);
            this.$emit('tabDelChange',nav.key,this.tabNavs)
        },
        delLeft(nav,index){//删除左边
            if(index === 0){ return }
            this.tabNavs = this.tabNavs.slice(index);
            this.$emit('tabDelChange',nav.key,this.tabNavs)
        },
        delOther(nav){//删除其它
            this.tabNavs = [nav] ;
            this.$emit('tabDelChange',nav.key,this.tabNavs)
        },
        delAll(){
          this.tabNavs = [] ;
          this.$emit('tabDelChange','',this.tabNavs)
        }
    },
    watch:{
        navs:{
            handler(v){
                this.tabNavs = v ;
            },
            deep:true,
            immediate:true
        }
    }
}
</script>

<style scoped>
.app-nav-container >>> .ant-tabs-nav .ant-tabs-tab{
    padding:0;
    position: relative;
}
.app-nav-container >>> .ant-tabs-nav-container{
    margin-bottom: 0;
}
.tab-text{
    display: inline-block;
    padding: 10px 16px;
    position: relative;
}
.tab-close{
    position: absolute;
    display: none;
    top: 50%;
    height: 16px;
    width: 16px;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    line-height: 13px;
    border-radius: 50%;
    margin-top: -9px;
    right: -4px;
}
.tab-text:hover .tab-close{
    display: inline-flex;

}
.tab-close:hover{
    color: red!important;
}
</style>